<template>
    <div class="main">
        <div class="main-header" v-if="buttons.length" style="display: flex;justify-content: space-between;">
			<div style="display: flex;">
				<el-input placeholder="关键字" style="width: 200px;margin-right: 10px;" v-model="searchParamCp.quick_search"
					size="mini" clearable>
				</el-input>
				<!-- <el-select v-model="searchParamCp.sex" size="mini" placeholder="请选择性别"
					style="width: 200px;margin-right: 10px;">
					<el-option v-for="(item,index) in sexlist" :key="index" :label="item" :value="index">
					</el-option>
				</el-select> -->
			<!-- 	<el-select v-model="searchParamCp.is_verifier" size="mini" placeholder="请选择是否是核销员"
					style="width: 200px;margin-right: 10px;">
					<el-option v-for="(item,index) in is_verifierlist" :key="index" :label="item" :value="index">
					</el-option>
				</el-select> -->
				<div class="timepick">
					<el-date-picker clearable v-model="searchParamCp.search_time" value-format="yyyy-MM-dd" size="mini"
						type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
				<el-button style="margin-left: 10px;" type="primary" size="mini" @click="searchs()">搜索</el-button>
				<el-button size="mini" @click="reset()">重置</el-button>
			</div>
			<div>
				<el-button
				    v-for="(item, index) in buttons"
				    :key="index"
				    :type="item.path | formatType"
				    :icon="item.icon"
				    :disabled="item.path | formatDisabled(selection)"
				    @click="tapButton(item)"
					size="mini"
				    >{{ item.title }}</el-button
				>
				<el-button type="primary" size="mini" @click="exportExcel">导出</el-button>
			</div>
            
        </div>
        <el-table
            ref="table"
            class="main-table"
            :data="memberData"
            height="100%"
            border
            header-cell-class-name="main-table-header"
            @selection-change="onSelectionChange"
            @row-click="onRowClick"
        >
            <el-table-column type="selection" width="39"></el-table-column>
            <el-table-column align="center" label="订单编号" prop="order_sn" />
			<!-- <el-table-column label="头像">
			    <template slot-scope="{row}">
			        <el-image style="width:60px;height:60px;border-radius: 100%" :src="row.wxPhotoURL" :preview-src-list="[row.wxPhotoURL]">
			        </el-image>
			    </template>
			</el-table-column> -->
            <!-- <el-table-column align="center" label="商户编号" prop="order_sn" /> -->
           <!-- <el-table-column
                align="center"
                label="电话号码"
                prop="mainPhone"
            /> -->
			<el-table-column label="配送方式"  align="center">
			    <template slot-scope="{row}">
					 <!-- //配送方式 1发往地址 2门店自取 -->
			       <el-tag v-if="row.delivery_method==1">发往地址</el-tag>
				  <el-tag v-if="row.delivery_method==0">门店自取</el-tag>
			    </template>
			</el-table-column>
            <!-- <el-table-column
                align="center"
                label="订单类型"
                prop="memberLevelName"
            /> -->
           <el-table-column
                align="center"
                label="店铺名称"
                prop="store_name"
            />
            <!-- <el-table-column
                align="center"
                width="100px"
                label="店铺电话"
                prop="mobile"
            /> -->
            <!-- <el-table-column align="center" label="商品总额" prop="total_money" /> -->
            <el-table-column align="center" label="店铺优惠金额" prop="coupon_money" />
            <!-- <el-table-column
                align="center"
                width="100px"
                label="今年消费金额"
                prop="costThisYear"
            /> -->
			<el-table-column align="center" label="优惠券抵扣" prop="coupon_money" />
            <el-table-column
                align="center"
                label="消费总金额"
                prop="total_money"
            />
            <!-- <el-table-column align="center" label="余额" prop="balance" /> -->
            <el-table-column align="center" label="订单金额" prop="pay_money" />
			<el-table-column align="center" label="服务费" prop="server_money" />
			<el-table-column align="center" label="结算金额" prop="settle_money" />
            <!-- <el-table-column align="center" label="地区" prop="area" />
            <el-table-column align="center" label="地址" prop="address" /> -->
            <!-- <el-table-column align="center" label="配送方式" prop="vipNum" /> -->
			<el-table-column align="center" label="优惠券结算金额" prop="settle_coupon_money" />
			  <el-table-column align="center" label="总结算金额" >
			 	 <template slot-scope="{row}">
			 		{{(Number(row.settle_coupon_money)+Number(row.settle_money)).toFixed(2)}}
			 	 </template>
			 	</el-table-column>
			<el-table-column label="下单时间" prop="addtime" width="140px">
			    <template slot-scope="{row}">
			       {{getTime(row.addtime)}}
			    </template>
			</el-table-column>
        </el-table>
        <el-pagination
            class="main-pagination"
            :current-page.sync="page"
            :page-size="limit"
            :total="total"
            @current-change="onCurrentChange"
            layout="total,jumper,prev,pager,next"
        ></el-pagination>
        <el-dialog
            :visible.sync="dialogVisible"
            :title="dialogTitle"
            append-to-body
            width="800px"
            @close="onDialogClose"
        >
            <component
                :is="dialogView"
                @update="getMemberData"
                @search="search"
                :selection="selection"
            ></component>
        </el-dialog>
        <!-- <Info ref="info" :selection="selection" @close="onDialogClose" /> -->
    </div>
</template>

<script>
import { get,post } from "@/assets/js/http.js";
export default {
    name: "waitsettled",
    data() {
        return {
            memberData: [],
            selection: [],
            page: 1,
            limit: 20,
            total: 0,
            dialogVisible: false,
            dialogTitle: "",
            dialogView: "",
			id:[],//设置代理的id列表
			searchParamCp:{},
			sexlist:['未知','男','女'],//	1男 2女 0未知
			is_verifierlist:['否','是'],//是否核销员 0香 1是
			searchinfo:{
				// sex: null,
				quick_search: '',
				search_time:[],
				is_verifier:'',
			}
        };
    },
    computed: {
        buttons() {
            return this.$store.state.buttons;
        }
    },
    components: {
        // Photo: () => import("./photo.vue"),
        // Search: () => import("./search.vue"),
        // Info: () => import("./info.vue")
    },
    mounted() {
        this.getMemberData();
    },
    methods: {
		getTime(time) {
			let date = new Date(time * 1000)
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			let day = date.getDate()
			// 时分秒
			let hour = date.getHours()
			let minute = date.getMinutes()
			let second = date.getSeconds()
			return `${year}-${month}-${day} ${hour}:${minute}:${second}`
		},
        search(result) {
            this.page = 1;
            console.log(result);
        },
        async getMemberData() {
            const data = await get({
                url: "/admin/finance.Settle/index",
                loading: true,
                params: {
                    page: this.page,
                    limit: this.limit,
					is_agent:0,//0用户列表 1代理商列表
					...this.searchinfo,
					...{
						search_time: this.searchinfo.search_time.length ? this.searchinfo.search_time.join(
							' - ') : ''
					}
                }
            });
            const list = data.list;
            this.total = data.total;
            // list.forEach(item => {
            //     item.firstCostDate = item.firstCostDate?.slice(0, 10);
            //     item.latestCostDate = item.latestCostDate?.slice(0, 10);
            // });
            this.memberData = list;
			console.log(this.memberData,list)
        },
        onCurrentChange(index) {
            this.page = index;
            this.getMemberData();
        },
        onCheck() {
            // this.dialogTitle = "查看客户照片";
            // this.dialogView = "Photo";
            // this.dialogView = "Info";
            // this.dialogVisible = true;
            this.$refs.info.show();
        },
		searchs() {
			this.page = 1
			this.searchinfo = {
				...this.searchinfo,
				...this.searchParamCp
			}
			this.getMemberData()
		},
		reset() {
			this.page = 1
			this.searchParamCp = {}
			this.searchinfo = {
					quick_search: '',
					search_time:[],
					is_verifier:'',
				},
				this.getMemberData()
		},
        onSearch() {
            this.dialogTitle = "搜索";
            this.dialogView = "Search";
            this.dialogVisible = true;
        },
        onSelectionChange(selection) {
			console.log(selection,'selection')
            this.selection = selection;
        },
        onRowClick(row) {
            // this.$refs.table.toggleRowSelection(row);
            // this.$refs.info.show();
        },
        onDialogClose() {
            this.$refs.table.clearSelection();
        },
		//设为代理
		onset() {
			this.$confirm(
					`此操作将设置${this.selection.length}个代理, 是否继续?`,
					"提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					}
				)
				.then(async () => {
					// let query = "";
					// for (let i = 0; i < this.selection.length; i++) {
					// 	const item = this.selection[i];
					// 	if (i > 0) {
					// 		query += "[" + item.id+"]";
					// 	} else {
					// 		query += "[" + item.id+"]";
					// 	}
					// }
					this.selection.forEach(item=>this.id.push(item.id))
					await post({
						url: "/admin/user.RealmeritUser/setAgent",
						data: {
						   id:this.id
						},
						successTip: true,
					});
					this.getMemberData();
					console.log(this.selection,'this.selection',this.id)
				})
				.catch(() => {
					this.$refs.table.clearSelection();
				});
		},
		//发起结算
		settled() {
			this.$confirm(
					`此操作将发起${this.selection.length}个结算, 是否继续?`,
					"提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					}
				)
				.then(async () => {
					this.selection.forEach(item=>this.id.push(item.id))
					await post({
						url: "/admin/finance.Settle/doSettle",
						data: {
						   ids:this.id
						},
						successTip: true,
					});
					this.getMemberData();
					console.log(this.selection,'this.selection',this.id)
				})
				.catch(() => {
					this.$refs.table.clearSelection();
				});
		},
		//导出
		async exportExcel() {
			this.$loading()
			let res = await get({
				export: true,
				url: '/admin/finance.Settle/exportStoreIndex',
				params: {
					// page: this.page,
					// limit: this.limit,
					is_agent: 0, //0用户列表 1代理商列表
					...this.searchinfo,
					...{
						search_time: this.searchinfo.search_time.length ? this.searchinfo.search_time.join(
							' - ') : ''
					}
				}
			})
			let a = document.createElement('a');
			var url = URL.createObjectURL(res);
			a.href = url;
			a.click();
			this.$loading().close()
		},
        tapButton(item) {
            if (item.path === "settled") {
                this.settled();
            } else if (item.path === "search") {
                // this.onSearch();
            } else if (item.path === "set") {
                // this.onset();
            } else if (item.path === "off") {
                // this.onoff();
            }
			
        }
    }
};
</script>
